<template>
    <!-- this is a sample to show the usage of data-view spaceship layout and theme -->
    <div :class="[layoutClass, focusClass, globalThemeClass]">
        <div class="dv-main-layout dv-spaceship">
            <!-- Background -->
            <img src="#" alt="space-sky" class="dv-bg space-sky">
            <img src="#" alt="space-ship" class="dv-bg space-ship">
            <img src="#" alt="header" class="space-header">
            <inline-svg class="dv-bg atmosphere" :src="atmosphere"></inline-svg>

            <!-- Ornament -->
            <inline-svg class="dv-ornament-bed" :src="bed"></inline-svg>
            <inline-svg class="dv-ornament-rotary-table dv-ornament-rotary-table dv-rotary-table dv-rotary-table-3d" :src="rotary"></inline-svg>
            <div class="dv-ornament-five-star"></div>

            <!-- Views -->
            <div class="brief-view brief-view-xs size-wide pos-left  pos-top    ">
                <dv-view-bg :view-bg="viewBg"></dv-view-bg>
            </div>
            <div class="brief-view brief-view-xs size-wide pos-left  pos-middle ">
                <dv-view-bg :view-bg="viewBg"></dv-view-bg>
            </div>
            <div class="brief-view brief-view-xs size-wide pos-left  pos-bottom ">
                <dv-view-bg :view-bg="viewBg"></dv-view-bg>
            </div>
            <div class="brief-view brief-view-xs size-wide pos-right pos-top    ">
                <dv-view-bg :view-bg="viewBg"></dv-view-bg>
            </div>
            <div class="brief-view brief-view-xs size-wide pos-right pos-middle ">
                <dv-view-bg :view-bg="viewBg"></dv-view-bg>
            </div>
            <div class="brief-view brief-view-xs size-wide pos-right pos-bottom ">
                <dv-view-bg :view-bg="viewBg"></dv-view-bg>
            </div>
        </div>
    </div>
</template>

<script>
    import {mapGetters} from "vuex";
    import FiveStar from "./FiveStar";
    import SvgRes from "./SvgRes";
    import DvViewBg from "./DvViewBg";

    export default {
        name: "DvSpaceship",
        components: {DvViewBg},
        data() {
            return {
                viewBg: require("../assets/image/spaceship/views/view-bg-color.png")
            }
        },
        mounted() {
            FiveStar(document.getElementsByClassName("dv-ornament-five-star")[0], 1500)
        },
        computed: {
            ...mapGetters("dv_layout", ["layoutClass", "focusClass"]),
            ...mapGetters("dv_theme", ["globalThemeClass"]),
            atmosphere: () => SvgRes["bg/atmosphere"],
            xsWide: () => SvgRes["views/view-brief-xs-wide"],
            bed: () => SvgRes["ornament/bed"],
            rotary: () => SvgRes["ornament/rotary-table"]
        }
    }
</script>

<style lang="scss">
    /*
     * sass codes below are only write for assets in the "assets" folder
     */
    @import "../assets/sass/style";

    .dv-spaceship {
        // @formatter:off

        img.space-sky {content: url("../assets/image/spaceship/bg/bg-starry-sky.png")}

        img.space-ship {content: url("../assets/image/spaceship/bg/bg-spaceship.png");}

        img.space-header {content: url("../assets/image/spaceship/bg/header.png");}

        .brief-view {
            &.pos-top img.view-holder {content: url("../assets/image/spaceship/views/holder/view-holder-top.png");}
            &.pos-middle img.view-holder {content: url("../assets/image/spaceship/views/holder/view-holder-left.png");}
            &.pos-bottom {
                img.view-holder {content: url("../assets/image/spaceship/views/holder/view-holder-top.png");}
                img.view-bed {content: url("../assets/image/spaceship/views/holder/view-holder-bed.png");}
            }
        }

        .brief-view-ln img.view-holder {content: url("../assets/image/spaceship/views/holder/view-holder-left.png");}

        .detail-view img.view-bg {content: url("../assets/image/spaceship/views/view-detail.png");}
        // @formatter:on
    }
</style>
